<template>
	<view class="box">
		<image class="back" :src="imgsrc" mode=""></image>
		<view class="mian">
			<text class="title">
			{{listArr.active_title}}
			</text>
			<view class="user">
				<!-- <text>{{listArr.active_title}}</text> -->
				<text>主办方</text>
				<text>韩梅梅</text>
			</view>
			<view class="time">
				<view class="t1">报名时间: {{time(listArr.active_start_time)}}-{{
					time(listArr.active_end_time)}}</view>
				<view class="t2">活动时间: {{time(listArr.registration_start_time)}}-{{time(listArr.registration_end_time)}}</view>
			</view>
			<view class="content">
				{{listArr.active_details}}
			</view>
			<view class="date">
				<text>时间: 2021.10.29</text>
			</view>
			<view class="activity">
				<text>19:00~21:30万圣节假面舞会</text>
			</view>
			<view class="place">
				<text>地点:计算机学院体院馆</text>
			</view>
			<view class="btn">
				<button class="btn1" type="default" size="mini">分享给微信好友</button>
				<button @click="signUp(listArr)" class="btn2" type="default" size="mini">{{msg}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default{
		data(){
			return{
				listArr:'',
				imgsrc:'',
				msg:'马上报名',
				campus_activites_id:'',
				wx_user_id:1
			}
		},
		methods:{
			signUp(listArr){
				this.$http({
					url:'/activites/addRegistration',
					data:{
						campus_activites_id :listArr.active_id,
						wx_user_id :this.wx_user_id
					}
				}).then((res)=>{
					if(res.data.code==200){
						this.msg='已报名'
					}
				})
			},
			time(t){
				return this.$date(new Date(t));
			}
		},
		onLoad: function(option){
		    let that=this
		    const eventChannel = this.getOpenerEventChannel()
		    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
		    eventChannel.on('acceptDataFromOpenerPage', function(data) {
		      console.log(data.data)
			  that.listArr=data.data
			  that.imgsrc=data.data.active_main_picture
		    })
		}
	}
</script>

<style lang="less" scoped>
	.back{
		width: 750rpx;
		height: 330rpx;
	}
	.mian{
		margin-left: 30rpx;
		.title{
			font-size: 50rpx;
			font-weight: 600;
			height: 100rpx;
			line-height: 100rpx;
		}
		.user text:nth-child(1){
			display: inline-blockfff;
			background: #ccc;
			color: #6f6f6f;
			width: 100rpx;
			height: 35rpx;
			border-radius: 10rpx;
			padding:5rpx 15rpx;
			line-height: 35rpx;
			text-align: center;
			margin-right: 20rpx;
		}
		.time{
			margin:30rpx auto;
			width:650rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			height: 200rpx;
			border: dashed 1px #999999;
			color: #999;
			.t1{
				margin:0 auto;
				width:580rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
			.t2{
				margin:0 auto;
				width:580rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
		.content{
			font-size: 30rpx;
			margin: auto 30rpx;
		}
		.date,.activity,.place{
			height: 80rpx;
			line-height: 80rpx;
		}
		.btn{
			margin-top: 35rpx;
			margin-bottom: 35rpx;
			display: flex;
			justify-content: center;
			
			.btn1{
				border-radius: 35rpx;
				border: 1px solid black;
			}
			.btn2{
				background: #F0AD4E;
				border-radius: 35rpx;
			}
		}
	}
</style>
